<!-- 修改用户名 changeUsername  -->
<template>
    <view>
      <!-- 标题栏 -->
      <view class="head-box ss-m-b-45">
        <view class="head-title ss-m-b-20">修改昵称</view>
      </view>
  
      <!-- 表单项 -->
      <uni-forms
        ref="nicknameRef"
        v-model="state.model"
        :rules="state.rules"
        validateTrigger="bind"
        labelWidth="140"
        labelAlign="center"
      >
          <view class="inputBox ss-flex">
            <uni-forms-item name="nickname" label="昵称">
                <view class="contentBorder">
                  <uni-easyinput
                    placeholder="请输入昵称"
                    v-model="state.model.nickname"
                    :inputBorder="false"
                  ></uni-easyinput>
                </view>
            </uni-forms-item>
          </view>
          <view class="tipsBox ss-p-l-4">
              <view class="tipsBox-item">用户名限制2-20个字符，一个汉字为一个字符</view>
          </view>
        <view class="editPwd-btn-box ss-m-t-50">
          <button class="ss-reset-button save-btn" @tap="changeUsernameSubmit">
            保存
          </button>
        </view>
      </uni-forms>
    </view>
  </template>
  
  <script setup>
    import { ref, reactive, unref } from 'vue';
    import sheep from '@/sheep';
    import { nickname } from '@/sheep/validate/form';
    import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
    const nicknameRef = ref(null);
  
    // 数据
    const state = reactive({
      model: {
        nickname: ''
      },
      rules: {
        nickname,
      },
    });
  
    // 7.修改用户名
    async function changeUsernameSubmit() {
      const validate = await unref(nicknameRef)
        .validate()
        .catch((error) => {
          console.log('error: ', error);
        });
      if (!validate) return;
      // sheep.$api.user.changeUsername(state.model).then((res) => {
      //   if (res.error === 0) {
      //     sheep.$store('user').getInfo();
      //     closeAuthModal();
      //   }
      // });
      console.log('state.model: ', state.model);
      const { error, data } = await sheep.$api.user.update(state.model);
      if (error === 0) {
        sheep.$store('user').getInfo();
        closeAuthModal();
      }
    }
  </script>
  
  <style lang="scss" scoped>
    @import '../index.scss';
    .head-box{
        .head-title{
            font-family: Source Han Sans;
            font-size: 36rpx !important;
            font-weight: 500 !important;
            line-height: normal;
            text-align: center;
            color: #404040;
        }
    }
    .contentBorder{
          
          border-bottom: 2rpx solid #D8D8D8;
    }
    .tipsBox{
          margin-top: 20rpx;
        .tipsBox-item{
            font-family: Source Han Sans;
            font-size: 28rpx;
            font-weight: normal;
            line-height: normal;
            letter-spacing: normal;
            color: #9E9E9E;
        }
    }
    .inputBox{
        &>view{
            flex:1;
        }
        padding:20rpx 20rpx 10rpx 30rpx;
        width: 690rpx;
        height: 94rpx;
        box-sizing: border-box;
        border-radius: 20rpx;
        // background: #EEEEEE;
    }
    .save-btn{
        width: 685rpx !important;
        height: 100rpx !important;
        border-radius: 100rpx !important;
        background: #2B6EDE !important;
        font-family: Source Han Sans;
        font-size: 36rpx !important;
        font-weight: bold;
        line-height: normal;
        letter-spacing: normal;
        color: #FFFFFF;
    }
  </style>
  